<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul id="test">
        <li>第一个li元素</li>
        <li>第二个li元素</li>
        <li>第三个li元素</li>
    </ul>
    <script>
        var el=document.getElementById("test").getElementsByTagName("li");
        for(var i=0;i<el.length;i++){
         el[i].onclick=function(){
             alert(i);
         }
        }
//         核心要点:
// 点击任意一一个标签，弹出的都是3这个数字
// 1. for循环会为每个li绑定点击事件
// 2.当用户点击相应的Ii元素时，会执行与之相对
// 应的功能函数，弹出i值
// 3.由于此前for循环的进行，全局下的变量i值已
// 经变化成了eles.length (此处为3)
// 4.在点击|i对应的功能函数当中，并没有i这个变
// 量的存储空间，此时需要向.上查找，找到全局作
// 用域中的变量i的存储空间，并使用它的值，这
// 也就导致点击任意一个标签，弹出的都是数字3

    </script>
</body>
</html>